<template>
  <el-dialog v-model="visible" title="Test Details" width="80%">
    <el-table :data="sqlServerData" style="width: 100%; margin-top: 20px;" border stripe>
      <el-table-column prop="Type" label="Type" />
      <el-table-column prop="Tag" label="Tag" show-overflow-tooltip />
      <el-table-column prop="HostName" label="HostName" />
      <el-table-column prop="StartTime" label="Start Time">
        <template #default="scope">
          {{ formatDate(new Date(scope.row.StartTime)) }}
        </template>
      </el-table-column>
      <el-table-column prop="EndTime" label="End Time">
        <template #default="scope">
          {{ formatDate(new Date(scope.row.EndTime)) }}
        </template>
      </el-table-column>
      <el-table-column prop="Duration" label="Duration">
        <template #default="scope">
          {{ new Date(scope.row.Duration).toISOString().slice(11, 19) }}
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { fetchTestCaseData } from '../../services/esService';
import { ElDialog,  ElTable, ElTableColumn } from 'element-plus';
import { formatDate } from '../../utils/dateUtils';
const visible = ref(false);
const details = ref(null);
const sqlServerData = ref([]);

const show = async (row) => {
  details.value = row;
  sqlServerData.value  = await fetchTestCaseData({
    testCase: row.testCase,
    agentName: row.AgentName,
    startTime: row.StartCaseTime,
    endTime: row.EndCaseTime
  });
  visible.value = true;
};

defineExpose({
  show
});
</script>
